<template>
  <div class="order-index">
    <!-- 导航栏 -->
    <van-nav-bar
      fixed
      title="订单列表"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 主体部分 -->
    <div class="order-body">
      <!-- 侧边栏 -->
      <van-sidebar v-model="activeKey" @change="changeList">
        <van-sidebar-item
          v-for="(item,i) in typeList"
          :title="item.name"
          :key="i"
          replace
        />
      </van-sidebar>
      <!-- 列表展示 -->
      <div class="contenr">
        <order-list :status="currentStatus"/>
      </div>
    </div>
  </div>
</template>

<script>
import OrderList from './components/order-list'

export default {
  components: {
    OrderList
  },
  data () {
    return {
      // 当前导航索引
      activeKey: 0,
      // 当前导航状态
      currentStatus: 'unpaid',
      // 状态列表
      typeList: [
        { name: '待支付', status: 'unpaid' },
        { name: '待配送', status: 'undelivery' },
        { name: '待自提', status: 'untake' },
        { name: '待发货', status: 'unsend' },
        { name: '待收货', status: 'send' },
        { name: '已收货', status: 'take' },
        { name: '已退款', status: 'refund' },
        { name: '已取消', status: 'cancel' }
      ]
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {

  },
  methods: {
    // 切换导航
    changeList(index) {
      this.currentStatus = this.typeList[index].status
    }
  }
}
</script>

<style scoped lang="less">
.order-index {
  height: 100vh;
  padding: 100px 0;
  box-sizing: border-box;
}
.order-body {
  height: 90vh;
  display: flex;
  .van-sidebar {
    flex: 1;
  }
  .contenr {
    padding: 10px;
    padding-bottom: 80px;
    overflow-y: auto;
    flex: 4;
  }
}
.van-nav-bar {
  background: #f93e2e;
}
/deep/.van-nav-bar__title{
  color: #fff
}
/deep/.van-icon-arrow-left {
  color:#fff
}
</style>
